<template>
    <div style="height: 100%">
        <navbar :title="$t('personal_my_data')"></navbar>
        <div class="content-noBottom" >
            <div class="data-body">
                <div class="data-title">{{ $t('personal_my_data_study_time') }}</div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_study_sum_time') }}</div>
                    <div class="data-item-value">{{ myData.learnDurationStr | isNull}}</div>
                </div>
            </div>
            <div class="data-body">
                <div class="data-title">{{ $t('personal_my_data_my_study') }}</div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_wang_course') }}</div>
                    <div class="data-item-value">{{ myData.selfstudy }}</div>
                </div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('cos_type_map') }}</div>
                    <div class="data-item-value">{{ myData.studyMap }}</div>
                </div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_exam') }}</div>
                    <div class="data-item-value">{{ myData.exam }}</div>
                </div>
            </div>
            <div class="data-body">
                <div class="data-title">{{ $t('personal_my_data_fenxiang') }}</div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_text') }}</div>
                    <div class="data-item-value">{{ myData.article }}</div>
                </div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_file') }}</div>
                    <div class="data-item-value">{{ myData.file }}</div>
                </div>
                <div class="data-item">
                    <div class="data-item-title">{{ $t('personal_my_data_question') }}</div>
                    <div class="data-item-value">{{ myData.question }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {cwnDecrypt} from '@/utils/tools';
export default {
    name: 'MyData',
    data() {
        return {
            myData: {
                learnDurationStr: 0,
                selfstudy: 0,
                classroom: 0,
                studyMap: 0,
                exam: 0,
                article: 0,
                file: 0,
                question: 0
            }
        };
    },
    filters: {
        isNull(val) {
            if (val) {
                return val;
            }
            return 0;
        }
    },
    methods: {
        ...{ cwnDecrypt },
        findMyDataById(id) {
            this.$axios.get(`/app/api/trainee/my/data/${id}`).then(res => {
                this.myData = res.data;
            });
        }
    },
    created() {
        this.findMyDataById(this.cwnDecrypt(this.$route.params.userEntId));
    }
};
</script>

<style scoped lang="less">
    .data-body {
        width: 100%;
        background: #fff;
        margin-top: 15px;
        .data-title {
            text-align: center;
            line-height: 50px;
            height: 50px;
            font-size: 16px;
            border-bottom: 1px #c0bfc4 solid;
        }
        .data-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px #ccc dashed;
            &:last-child {
                border-bottom: none;
            }
        }
    }
</style>
